<template>
  <el-dialog
    title="库存发放详情"
    v-model="visible"
    width="1100px"
    @close="onClose"
    :close-on-click-modal="false"
  >
    <div class="main">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="名称" prop="name">
          <el-input
            style="width: 200px"
            v-model.trim="queryParams.name"
            placeholder="请输入"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="queryParams.type" fit-input-width clearable placeholder="请选择">
            <el-option label="优惠券" value="1"></el-option>
            <el-option label="实物券" value="6"></el-option>
            <el-option label="礼包" value="88"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            style="width: 200px"
            v-model.trim="queryParams.remark"
            placeholder="请输入"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" size="default" :data="dataList">
        <el-table-column label="名称" align="center">
          <template #default="{ row }">
            <el-link :underline="false" type="primary" @click="handleSkip(row)">{{
              row.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="奖品类型" width="100px" align="center" prop="type">
          <template #default="{ row }">
            <div>
              {{ row.type === 6 ? '实物券' : row.type === 88 ? '礼包' : '优惠券' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发放数量" align="center" prop="grantNum" />
        <el-table-column label="库存" align="center" prop="repertoryNum" />
        <el-table-column label="中奖率" align="center" prop="sellRate">
          <template #default="{ row }">
            <div>{{ row.winningRate || '0.00' }}% </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-right: 10px">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getsurplusListApi } from '@/api/marketing/raffle'
import { listDataApi } from '@/api/system/dict/data'
import { useRouter } from 'vue-router'
const queryRef = ref(null)

const total = ref(0)
const dataList = ref([])
const visible = ref(false)

const queryParams = reactive({
  lotteryId: '',
  name: '',
  type: '',
  remark: '',
  pageNum: 1,
  pageSize: 10
})
const loading = ref(true)

/** 查询用户列表 */
function getList() {
  loading.value = true
  const params = {
    ...queryParams,
    receiveTimeStart: queryParams.time?.length ? queryParams.time[0] : '',
    receiveTimeEnd: queryParams.time?.length ? queryParams.time[1] : ''
  }
  delete params.time
  getsurplusListApi(params)
    .then((res) => {
      loading.value = false
      dataList.value = res?.data?.rows || []
      total.value = res?.data?.total || 0
    })
    .catch(() => {
      loading.value = false
      dataList.value = []
      total.value = 0
    })
}

// 搜索
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

// 重置
function resetQuery() {
  queryRef.value.resetFields()
  handleQuery()
}

// 跳转对应营销活动
const router = useRouter()
function handleSkip(row) {
  if (row.type === 6) {
    router.push({
      path: '/market/physicalGoods',
      query: {
        id: row.id,
        couponName: row.name,
        cityName: queryParams.cityName
      }
    })
  } else if (row.type === 88) {
    router.push({
      path: '/market/giftPack',
      query: {
        id: row.id,
        packName: row.name,
        cityName: queryParams.cityName
      }
    })
  } else {
    console.log('queryParams.cityName', queryParams.cityName)
    router.push({
      path: '/market/activity',
      query: { id: row.id, couponName: row.name, cityName: queryParams.cityName }
    })
  }
}

function onClose() {
  queryRef.value.resetFields()
  queryParams.pageNum = 1
  queryParams.pageSize = 10
}

function init(id, cityName) {
  visible.value = true
  queryParams.lotteryId = id
  queryParams.cityName = cityName
  getList()
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
:deep(.pagination-container .el-pagination) {
  right: 20px;
}
.main {
  position: relative;
  transform: translate3d(0, -30px, 0);
}
.type {
  margin-bottom: 20px;
}
</style>
